[SwiftUI] Colorをextensionで拡張してタイポを減らす方法

[SwiftUI] Colorをextensionで拡張してタイポを減らす方法

Clock Icon2022.08.22

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは、CX事業本部Delivery部の嶋村星哉です。

SwiftUIを使っていると色のタイポで表示されなくなることがあったので、extensionを使いColorを拡張してこの問題を解決しました。

そもそも色の指定でタイポしちゃう問題がなぜ起こるのかって話をします。

色の指定でタイポしちゃう問題

SwiftUIで色の指定するときには文字列で色のアセット名を入力して使います。 文字列で指定するので、MainColorMeinColorになっていてもコンパイルで怒られることもなく、表示されなくなってしまいます。

struct ContentView: View {
  var body: some View {
    Text("Hello World!")
      .foregroundColor(Color("MainColor"))
  }
}

解決方法

Colorをextensionで拡張して解決していきます。まずは、ColorExtension.swiftのファイルを作ります。 その中に下記のように、customMainColorという名前でプロパティを登録していきます。

import Foundation
import SwiftUI

extension Color {
  static let customMainColor = Color("MainColor")
}

これで、プロパティとして書けるようになります。 実際に書いてみたら、こんな感じになります。

struct ContentView: View {
  var body: some View {
    Text("Hello World!")
      .foregroundColor(.customMainColor)
  }
}

プロパティになったので、コンパイル時にチェックしてくれるようになります。 さらに、IntelliSense機能(保管機能)が使えるようになるためコーディングもとても楽になります!

たった1ファイルを追加し、数行の記述だけでタイポとおさらばできるので、おすすめです!

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.